.my-picker-cover{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    user-select: none;
    background-color:rgba(0,0,0,.6);
    transition: 0.1s ease-out background-color;
    will-change: background-color;
}

.picker{
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    &.picker-frame{
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        height: auto;
        background: #fff;
        width: 1em;
        margin: 0 auto;
        user-select: none;
        will-change: transform;
        transform: translateY(600px);
        transition: .3s ease-out transform .1s;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);

        .s-3d &{
            transform-style: preserve-3d;
        }

        &.s-open{
            transform: translateY(0);
        }
    }
    
    @media screen and (min-width: 401px) { 
        &.picker-frame{
            top: 50%;
            bottom: auto;
            margin-top: -200px;
        }
    }

    & .picker-head{
        width: 1em;
        height: .15em;
        padding: .03em .05em;
        box-sizing: border-box;
        background: #fff;
        // background: #f7f7f8;
        border-bottom: 1px solid rgba(224, 224, 224, .5);
        display: flex;
        // font-size: 5em;
        line-height: .09em;
    }
    & .picker-title{
        text-align: center;
        flex: 1;
        height: .09em;
        margin: 0;
        color: #3d4145;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 5px;
        font-weight: normal;
        line-height: .09em;
    }
    & .picker-btn-cancel,& .picker-btn-ok{
        color: #0894ec;
        border: 0;
        text-align: center;
        line-height: .09em;
    }
    & .picker-btn-cancel:hover,& .picker-btn-ok:hover {
        cursor: pointer;
    }
    & .picker-btn-cancel:active,& .picker-btn-ok:active {
        color: #0675bb;
    }
    & .picker-btn-cancel:active,& .picker-btn-ok:active {
        color: #0675bb;
    }
    & .picker-header-text{
        display: block;
        font-size: .04em;
    }
    & .picker-selected{
        display: none;
        margin-right: .02em;
    }

    & .s-open .picker-body{
        display: none;
    }

    & .picker-body{
        display: none;
        backface-visibility: hidden;
        overflow: hidden;
        width: 1em;
        display: flex;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        color: #000;
        opacity: 0;
    }
    &.s-open .picker-body{
        opacity: 1;
        transition: 0 ease-out opacity 0;
    }

    // 玻璃罩
    &.s-glass-over {

        &.s-webkit-glass-over .picker-body{
            -webkit-mask-box-image:
                    linear-gradient(to top,
                    transparent,
                    rgba(255, 255, 255, .2) 5%,
                    rgba(255, 255, 255, .6) 41.6%,
                    #fff 41.7%,
                    #fff 58.3%,
                    rgba(255, 255, 255, .6) 58.4%,
                    rgba(255, 255, 255, .2) 95%,
                    transparent);
        }

        &:not(.s-webkit-glass-over) .picker-body{
            &::after, &::before{
                content: "";
                display: block;
                position: absolute;
                width: 200%;
                pointer-events: none;
                z-index: 2;
                left: 0;
            }
            &::after{
                bottom: 0;
                box-shadow: 0 -.1768em 0 .1768em rgba(255, 255, 255, .6);
            }
            &::before{
                top: 0;
                box-shadow: 0 .1768em 0 .1768em rgba(255, 255, 255, .6);
            }
        }
    }
    & .picker-glass-over-border-top, & .picker-glass-over-border-bottom{
        position: absolute;
        width: 200%;
        pointer-events: none;
        top: 0;
        left: 0;
        z-index: 2;
    }
    & .picker-glass-over-border-top{
        box-shadow: 0 .3536em 0 0.5px #eee;
    }
    & .picker-glass-over-border-bottom{
        box-shadow: 0 .4964em 0 0.5px #eee;
    }

    & .picker-label{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: .04em;
    }
    & .picker-text{
        font-size: .04em;
        display: block;
    }
}
